<!DOCTYPE html>
<html>

<head lang="en">
	<title>首页</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
	<script src="/js/plugins/jquery/jquery.min.js"></script>
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css" >
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<link rel="stylesheet" href="/js/plugins/dialog2/css/dialog.css">
	<script src="/js/plugins/dialog2/js/dialog.min.js"></script>
	<link rel="stylesheet" href="/css/reset.css" rel="stylesheet">
	<link rel="stylesheet" href="/css/index.css" rel="stylesheet">
	<script>

        $(function () {

            $('.searchBtn').click(function () {
                location.href="/search.html";
            });

			$.get('/travels/commends',{currentPage:1,pageSize:3,type:1},function (data) {
                $('#travelsCommends').renderValues(data, {
                    getHref: function (item, value) {
                        var href = $(item).data('href');
                        $(item).attr('href', href + value);
                    }
                });
                $('.carousel-item:first').addClass('active');
            });
            showComments();


            //查询头条点评 localhost/strategyComments?currentPage=1&pageSize=10
            $.get('/strategyComments', {currentPage: 1, pageSize: 10}, function (data) {
                $("#comments").renderValues(data);
                //点击头像跳转到相应页面
                $(".go").click(function () {
                    var url = $(this).data("u");
                    var id = $(this).data("id");
                    window.location.href = url + id;
                });
            })

            //单个大图标日报显示
            $.get('/news/one', {state: 1, pageSize: 1}, function (data) {
                $("#bigger").renderValues(data.list[0]);
                $("#one a[data-url]").click(function () {
                    var url = $(this).data("url")
                    var id = $(this).data("id")
                    window.location.href = url + id;
                })
            });

            //多个小图标日报显示
			/*$.get('/news/many',{state:1,pageSize:0},function (data) {
			 console.log(data);
			 $("#smaller").renderValues(data);
			 $("#many a[data-url]").click(function () {
			 var url = $(this).data("url")
			 var id = $(this).data("id")
			 window.location.href = url + id;
			 })
			 });*/

            //分页
            var currentPage = $("#currentPage");
            var pageSize = $("#pageSize");
            var pages = 1;
            var allData = [];

            function query() {
                var currentPageValue = currentPage.val();
                var pageSizeValue = pageSize.val();
                $.post("/news/many", {currentPage: currentPageValue, pageSize: pageSizeValue}, function (data) {
                    $.merge(allData, data.list)
                    $("#smaller").renderValues({list: allData});
                    currentPage.val(parseInt(currentPageValue) + 1);
                    pages = data.pages;

                    $("#many a[data-url]").click(function () {
                        var url = $(this).data("url")
                        var id = $(this).data("id")
                        window.location.href = url + id;
                    })
                })
            }

            query();

            //翻页
            $(window).scroll(function () {
                if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                    var currentPageValue = currentPage.val()
                    if (currentPageValue <= pages) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '人家是有底线的人!',
                            autoClose: 1500
                        });
                    }
                }
            })

        })

		function showComments(){
			var Mar = document.getElementsByClassName("Marquee")[0];
			var child_div=Mar.getElementsByTagName("div");
			var picH = 50;//移动高度
			var scrollstep=3;//移动步幅,越大越快
			var scrolltime=20;//移动频度(毫秒)越大越慢
			var stoptime=3000;//间断时间(毫秒)
			var tmpH = 0;
			Mar.innerHTML += Mar.innerHTML;
			function start(){
				if(tmpH < picH){
					tmpH += scrollstep;
					if(tmpH > picH )tmpH = picH ;
					Mar.scrollTop = tmpH;
					setTimeout(start,scrolltime);
				}else{
					tmpH = 0;
					Mar.appendChild(child_div[0]);
					Mar.scrollTop = 0;
					setTimeout(start,stoptime);
				}
			}
			setTimeout(start,stoptime)
		}
	</script>
	<style>
		.textColor
		{

			color: black;

		}
	</style>
</head>


<body>
<input type="hidden" name="currentPage" id="currentPage" value="1">
<input type="hidden" name="pageSize" id="pageSize" value="3">

<div class="body">
	<input type="checkbox" id="menu">

	<label for="menu" class="menu">
		<span><i class="fa fa-user fa-fw fa-2x"></i></span>
		<span><i class="fa fa-chevron-left fa-fw fa-2x" style="color: #3E3C3B"></i></span>
	</label>

	<!-- 侧边栏 -->
	<div class="nav">
		<iframe id="ipage" src="/mine/simpleProfiles.html" frameborder="0" width="90%"></iframe>
	</div>

	<div class="search-head">
		<div class="row nav-search">
			<div class="col-2"></div>
			<div class="col-10">
				<div class="input-group-sm search">
					<input class="form-control searchBtn" placeholder="搜索旅行攻略、日记和旅游资讯">
				</div>
			</div>
		</div>
	</div>

	<div class="container">
		<h6 class="module-title">每周推荐</h6>
		<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
			<div id="travelsCommends">
				<div class="carousel-inner" render-loop="list">
					<div class="carousel-item">
						<a data-href="travelContent.html?id=" render-key="list.travel_id" render-fun="getHref">
							<img class="d-block w-100"  render-src="list.coverUrl" width="100%" height="200px">
							<span class="recommend" render-html="list.title"></span></a>

						<div class="recommend-author"><a href="javascript:;" data-url="/travelContent.html?id="
														 render-attr="data-id=list.travel_id"></a>
							<!--根据作者id跳转个人空间-->
							<a href="javascript:;" data-u="userProfiles.html?id=" render-attr="data-id=list.author_id"
							   class="userId go">

								<img class="rounded-circle" style="width: 10%;"
									 render-src="list.author_headImgUrl">
								<span render-html="list.author_nickName"></span>
							</a>在&nbsp;
							<span render-html="list.p_name"></span>
						</div>
					</div>
				</div>
				<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="sr-only"></span>
				</a>
				<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="sr-only"></span>
				</a>
			</div>
		</div>
		<hr>


		<div class="row">
			<div class="col" align="center" >
				<a href="strategyPage.html" style="font-size: 18px">
					<img src="/icon/strategy.png" width="60px" height="60px"></br>
					<span class="textColor">找攻略</span>
				</a>
			</div>
			<div class="col" align="center">
				<a href="travelPage.html" style="font-size: 18px">
					<img src="/icon/travel.png" width="60px" height="60px"></br>
					<span class="textColor">看游记</span>
				</a>
			</div>
			<div class="col" align="center">
				<a href="mall.html" style="font-size: 18px">
					<img src="/icon/market.png" width="60px" height="60px"></br>
					<span class="textColor">积分商城</span>
				</a>
			</div>
			<div class="col" align="center">
				<a href="hotel.html" style="font-size: 18px">
					<img src="/icon/hotel.png" width="60px" height="60px"></br>
					<span class="textColor">找酒店</span>
				</a>
			</div>
		</div>
		<hr>
		<div class="row dynamic " id="comments">
			<div class="col-1" style="padding: 0px;">
				<img class="rounded" src="/img/topComment.png" style="width: 50px;">
			</div>
			<div class="col">
				<div class="Marquee" render-loop="list">
					<div class="d-flex">
						<a href="javascript:" data-u="userProfiles.html?id=" render-attr="data-id=list.user.id"
						   class="userId go">
							<img class="rounded-circle dynamic-head"
								 render-src="list.user.headImgUrl">
						</a>
						<a href="javascript:" data-u="strategyComment.html?id="
						   render-attr="data-id=list.id"
						   class=" dynamic-detail strategyId go">
							<span render-html="list.user.nickName"></span> 点评了攻略<p
								render-html="list.strategy.title"></p>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<hr>

	<div class="container">
		<h6 class="module-title">骡窝日报 <a href="/newsPage.html">更多</a>  </h6>


		<div class="news " id="bigger">
			<!--<div render-loop="data.list[0]">-->
			<div id="one">
				<a href="javascript:;" data-url="/newsContent.html?id=" render-attr="data-id=id">
					<img width="100%" render-src="coverUrl">
					<div class="caption">
						<h5 render-html="title"></h5>
						<p render-html="abstracts">
						</p>
					</div>
				</a>
			</div>
		</div>

		<hr>
		<div id="smaller">
			<div id="many" render-loop="list">
				<div style="margin-bottom: 20px">
					<a href="javascript:;" data-url="newsContent.html?id=" render-attr="data-id=list.id">
						<div class="row news-detail">
							<div class="col-5">
								<img render-src="list.coverUrl">
							</div>
							<div class="col-7">
								<h4 render-html="list.title"></h4>
								<p render-html="list.abstracts"></p>
							</div>
						</div>
					</a>
					<hr>
				</div>
			</div>
		</div>
	</div>
</div>
</body>

</html>